/*------------------------------------------------*/
/*	Page: Invoice
/*------------------------------------------------*/

.invoice-header {
	border-bottom: 1px solid $line-color;
	margin-bottom: 50px;

	ul {
		text-align: right;
		
		li {
			padding: 0 15px;

			&:not(:first-child) {
				border-left: 1px solid $line-color;

				@include max-screen($break-small) {
					border-left: none;
				}
			}
		}

		@include max-screen($break-medium) {
			margin-top: 10px;
			text-align: left;
		}
	}
}

.invoice-from-to {
	margin-bottom: 50px;

	.name {
		margin-top: 15px;
		font-size: 1.5em;
		font-weight: 700;
	}

	address {
		.contact {
			margin-top: 10px;
			
			p {
				margin-bottom: 0;

				span {
					font-weight: 700;
				}
			}
		}
	}
}

.invoice-table {
	tbody {
		tr td:last-child {
			text-align: right;
		}
	}
}

.invoice-notes {
	strong {
		display: block;
	}

	p {
		font-size: 0.75em;
	}
}

.invoice-footer {
	.right-col {
		position: absolute;
		right: 15px;

		@include max-screen($break-small) {
			position: relative;
			right: 0;
		}
	}

	@include max-screen($break-small) {
		.right-col,
		.left-col {
			width: 100%;
			float: none;
			margin-left: 0;
		}
	}
}

.invoice-total {
	padding-right: 24px;

	.row > div {
		padding: 0;

		&:first-child p {
			padding-left: 10px;
		}
	}

	p:last-child {
		border-top: 1px solid $line-color;
		border-bottom: 1px solid $line-color;
		font-weight: 700;
		font-size: 1.3em;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

.invoice-buttons {
	text-align: right;
	margin-top: 50px;
}

/* printed invoice styles */
@media print {
	.top-general-alert,
	.top-bar,
	.left-sidebar,
	.breadcrumb,
	.quick-access,
	.main-header,
	.footer,
	.invoice-buttons,
	.del-style-switcher {
		display: none !important;
	}

	.table-responsive {
		overflow-x: auto;
	}

	.col-print-1, 
	.col-print-2, 
	.col-print-3, 
	.col-print-4, 
	.col-print-5, 
	.col-print-6, 
	.col-print-7, 
	.col-print-8, 
	.col-print-9, 
	.col-print-10, 
	.col-print-11 {
		float: left;
	}

	.col-print-1 {
		width: 8.33333%;
	}

	.col-print-2 {
		width: 16.66667%;
	}

	.col-print-3 {
		width: 25%;
	}

	.col-print-4 {
		width: 33.33333%;
	}

	.col-print-5 {
		width: 41.66667%;
	}

	.col-print-6 {
		width: 50%;
	}

	.col-print-7 {
		width: 58.33333%;
	}

	.col-print-8 {
		width: 66.66667%;
	}

	.col-print-9 {
		width: 75%;
	}

	.col-print-10 {
		width: 83.33333%;
	}

	.col-print-11 {
		width: 91.66667%;
	}

	.col-print-12 {
		width: 100%;
	}

	.col-print-offset-0 {
		margin-left: 0;
	}

	.col-print-offset-1 {
		margin-left: 8.33333%;
	}

	.col-print-offset-2 {
		margin-left: 16.66667%;
	}

	.col-print-offset-3 {
		margin-left: 25%;
	}

	.col-print-offset-4 {
		margin-left: 33.33333%;
	}

	.col-print-offset-5 {
		margin-left: 41.66667%;
	}

	.col-print-offset-6 {
		margin-left: 50%;
	}

	.col-print-offset-7 {
		margin-left: 58.33333%;
	}

	.col-print-offset-8 {
		margin-left: 66.66667%;
	}

	.col-print-offset-9 {
		margin-left: 75%;
	}

	.col-print-offset-10 {
		margin-left: 83.33333%;
	}

	.col-print-offset-11 {
		margin-left: 91.66667%;
	}

	.bottom .container .content-wrapper {
		border-left: none !important;
	}

	.invoice-header {
		img {
			width: auto;
		}

		ul li {
			font-size: 8pt;
		}
	}

	.invoice-from-to {
		.name {
			font-size: 12pt;
		}

		.row > div {
			float: left;
		}
	}

	.invoice-notes {
		border-top: none;
		border-right: none;
		border-bottom: none;
	}
}